<template>
  <view class="page">
    <!-- 导航栏 - 带返回按钮 -->
    <view class="navbar">
      <view class="navbar-content">
        <view class="left-section" @tap="goBack">
          <image
            src="/static/icons/left_arrow.png"
            class="back-icon"
            mode="aspectFit"
          ></image>
        </view>
        <text class="navbar-title">公司授权加入</text>
      </view>
    </view>

    <!-- 公司信息卡片 -->
    <view class="company-card" v-if="companyInfo">
      <!-- 公司基本信息 -->
      <view class="company-header">
        <image 
          :src="companyInfo.logo || '/static/images/logo.png'" 
          class="company-logo" 
          mode="aspectFit"
        ></image>
        <view class="company-info">
          <text class="company-name">{{ companyInfo.shortName || companyInfo.companyName || '未知公司' }}</text>
          <view class="company-tags">
            <text class="industry-tag">{{ companyInfo.industry || '未知行业' }}</text>
            <text class="hr-count">已有{{ companyInfo.hrCounts || 0 }}位HR入驻</text>
          </view>
        </view>
      </view>

      <!-- 用户信息填写区域 -->
      <view class="user-info-section">
        <text class="section-title">个人信息</text>
        <view class="form-item">
          <text class="form-label">真实姓名</text>
          <input 
            v-model="userInfo.realName" 
            class="form-input" 
            placeholder="请输入您的真实姓名"
            maxlength="20"
          />
        </view>
        <view class="form-item">
          <text class="form-label">联系电话</text>
          <input 
            v-model="userInfo.phone" 
            class="form-input" 
            placeholder="请输入您的联系电话"
            type="number"
            maxlength="11"
          />
        </view>
        <view class="form-item">
          <text class="form-label">我的职务</text>
          <input 
            v-model="userInfo.position" 
            class="form-input" 
            placeholder="请输入您的职务（如：HR经理、招聘专员等）"
            maxlength="30"
          />
        </view>
      </view>

      <!-- 授权码区域 -->
      <view class="authorize-section">
        <text class="section-title">授权码验证</text>
        <text class="authorize-desc">请输入企业提供的授权码，验证通过后即可成为公司HR</text>
        <view class="auth-code-input">
          <input 
            v-model="code" 
            class="auth-code-field" 
            placeholder="请输入授权码"
            maxlength="50"
            type="text"
          />
        </view>
      </view>

      <!-- 提交按钮 -->
      <view class="submit-section">
        <button 
          class="submit-btn" 
          @tap="submitApplication"
          :disabled="!canSubmit"
        >
          提交
        </button>

      </view>
    </view>

    <!-- 加载状态 -->
    <view v-else class="loading">
      <text>加载中...</text>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue';
import { getCompanyDetailApi } from '@/api/company.js';
import { applyToBeHrApi } from '@/api/user.js';

// 公司信息
const companyInfo = ref(null);
// 用户信息
const userInfo = ref({
  realName: '',
  phone: '',
  position: ''
});
// 授权码
const code = ref('');

// 获取公司信息
onMounted(() => {
  const pages = getCurrentPages();
  const currentPage = pages[pages.length - 1];
  const companyId = currentPage.options?.companyId;
  
  console.log('companyId:', companyId);

  if (companyId && companyId !== 'undefined') {
    getCompanyDetail(companyId);
  } else {
    console.log('未获取到公司ID，使用默认数据');
    // 使用默认测试数据
    companyInfo.value = {
      id: 1,
      companyName: '测试公司',
      shortName: '测试',
      logo: '/static/images/logo.png',
      industry: '互联网',
      hrCounts: 5
    };
  }
});

// 获取公司详情
const getCompanyDetail = async (id) => {
  try {
    const companyData = await getCompanyDetailApi(id);
    companyInfo.value = companyData;
    console.log('公司详情获取成功:', companyData);
  } catch (error) {
    console.error('获取公司详情失败:', error);
    uni.showToast({
      title: '获取公司信息失败',
      icon: 'none'
    });
    // 获取失败时使用默认数据
    companyInfo.value = {
      id: parseInt(id),
      companyName: '未知公司',
      shortName: '未知',
      industry: '未知行业',
      logo: '/static/images/logo.png',
      hrCounts: 0
    };
  }
};

// 返回上一页
const goBack = () => {
  uni.navigateBack({
    delta: 1
  });
};



// 提交申请
const submitApplication = async () => {
  if (!userInfo.value.realName.trim()) {
    uni.showToast({
      title: '请输入真实姓名',
      icon: 'none'
    });
    return;
  }
  
  if (!userInfo.value.phone.trim()) {
    uni.showToast({
      title: '请输入联系电话',
      icon: 'none'
    });
    return;
  }
  
  if (!/^1[3-9]\d{9}$/.test(userInfo.value.phone)) {
    uni.showToast({
      title: '请输入正确的手机号码',
      icon: 'none'
    });
    return;
  }
  
  if (!userInfo.value.position.trim()) {
    uni.showToast({
      title: '请输入您的职务',
      icon: 'none'
    });
    return;
  }
  
  if (!code.value.trim()) {
    uni.showToast({
      title: '请输入授权码',
      icon: 'none'
    });
    return;
  }
  
  try {
    uni.showLoading({
      title: '提交中...',
      mask: true
    });
    
    // 调用真实的提交审核API
    const applyData = {
      realName: userInfo.value.realName.trim(),
      phone: userInfo.value.phone.trim(),
      position: userInfo.value.position.trim(),
      code: code.value.trim(),
      companyId: companyInfo.value.id // 添加companyId
    };
    
    await applyToBeHrApi(applyData);
    
    uni.hideLoading();
    uni.showModal({
      title: '提交成功',
      content: '授权码验证通过，您已成为该公司的HR，可以开始使用招聘功能',
      showCancel: false,
      success: () => {
        uni.navigateBack();
      }
    });
    
  } catch (error) {
    uni.hideLoading();
    console.error('提交申请失败:', error);
    uni.showToast({
      title: error.message || '提交失败，请重试',
      icon: 'none'
    });
  }
};

// 计算属性：是否可以提交
const canSubmit = computed(() => {
  return userInfo.value.realName.trim() && 
         userInfo.value.phone.trim() && 
         /^1[3-9]\d{9}$/.test(userInfo.value.phone) &&
         userInfo.value.position.trim() &&
         code.value.trim();
});
</script>

<style scoped>
.page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

/* 导航栏样式 */
.navbar {
  background-color: #fff;
  border-bottom: 1rpx solid #e6e6e6;
  padding-top: var(--status-bar-height);
}

.navbar-content {
  display: flex;
  align-items: center;
  padding: 0 30rpx;
  height: 88rpx;
  position: relative;
}

.left-section {
  display: flex;
  align-items: center;
  min-width: 80rpx;
  padding: 20rpx 0;
}

.back-icon {
  width: 48rpx;
  height: 48rpx;
  display: block;
}

.navbar-title {
  font-size: 36rpx;
  font-weight: 500;
  color: #333;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
}

/* 公司卡片样式 */
.company-card {
  background-color: #fff;
  margin: 0;
  border-radius: 0;
  padding: 40rpx 30rpx;
  box-shadow: none;
  border-bottom: 1rpx solid #f0f0f0;
}

.company-header {
  display: flex;
  align-items: center;
  margin-bottom: 40rpx;
}

.company-logo {
  width: 120rpx;
  height: 120rpx;
  border-radius: 12rpx;
  margin-right: 30rpx;
  background-color: #f0f0f0;
}

.company-info {
  flex: 1;
}

.company-name {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 16rpx;
  display: block;
}

.company-tags {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 20rpx;
}

.industry-tag {
  background-color: #e8f5f4;
  color: #00bdb4;
  font-size: 24rpx;
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
}

.hr-count {
  color: #666;
  font-size: 26rpx;
}

/* 用户信息区域 */
.user-info-section {
  background-color: #fff;
  margin: 0;
  border-radius: 0;
  padding: 40rpx 30rpx;
  box-shadow: none;
  border-bottom: 1rpx solid #f0f0f0;
}

.section-title {
  font-size: 36rpx;
  font-weight: 600;
  color: #333;
  margin-bottom: 40rpx;
  display: block;
}

.form-item {
  margin-bottom: 30rpx;
}

.form-item:last-child {
  margin-bottom: 0;
}

.form-label {
  font-size: 30rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 20rpx;
  display: block;
}

.form-input {
  width: 100%;
  height: 88rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  padding: 0 30rpx;
  font-size: 30rpx;
  color: #333;
  border: 2rpx solid transparent;
  transition: border-color 0.3s;
}

.form-input:focus {
  border-color: #00bdb4;
  outline: none;
}

/* 授权书区域 */
.authorize-section {
  background-color: #fff;
  margin: 0;
  border-radius: 0;
  padding: 40rpx 30rpx;
  box-shadow: none;
  border-bottom: 1rpx solid #f0f0f0;
}

.authorize-desc {
  font-size: 28rpx;
  color: #666;
  text-align: center;
  margin-bottom: 60rpx;
  display: block;
}

/* 授权码输入区域 */
.auth-code-input {
  padding: 40rpx 0;
}

.auth-code-field {
  width: 100%;
  height: 88rpx;
  background-color: #f8f8f8;
  border-radius: 8rpx;
  padding: 0 30rpx;
  font-size: 30rpx;
  color: #333;
  border: 2rpx solid transparent;
  transition: border-color 0.3s;
  margin-bottom: 20rpx;
}

.auth-code-field:focus {
  border-color: #00bdb4;
  outline: none;
}

.auth-code-tip {
  font-size: 24rpx;
  color: #999;
  text-align: center;
  display: block;
}

/* 提交区域 */
.submit-section {
  background-color: #fff;
  margin: 0;
  border-radius: 0;
  padding: 40rpx 30rpx;
  box-shadow: none;
}

.submit-btn {
  width: 100%;
  height: 88rpx;
  background-color: #00bdb4;
  color: #fff;
  font-size: 32rpx;
  font-weight: 500;
  border-radius: 44rpx;
  border: none;
  margin-bottom: 30rpx;
  transition: background-color 0.3s;
}

.submit-btn:hover {
  background-color: #00a69e;
}

.submit-btn[disabled] {
  background-color: #ccc;
  color: #999;
}

.submit-tip {
  font-size: 26rpx;
  color: #999;
  text-align: center;
  line-height: 1.6;
  display: block;
}

/* 加载状态 */
.loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400rpx;
  color: #999;
  font-size: 28rpx;
}
</style>